<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js组件-自定义事件</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!--    父组件是使用props传递数据给子组件，但是如果想要子组件将数据回传给父组件，就需要用到自定义事件-->
<!--    使用v-on绑定自定义事件，每个Vue实例都实现了事件接口（Events interface)，即：-->
<!--        使用$on(eventName)监听事件-->
<!--        使用$emit(eventName)触发事件-->
<!--    父组件还可以在使用子组件的地方直接使用v-on来监听子组件触发的事件。-->

    <div id="app">
        <div id="counter-event-example">
            <p>{{total}}</p>
            <button-counter v-on:increment="incrementTotal"></button-counter>
            <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
    </div>
    <script>
        Vue.component('button-counter',{
            template:'<button v-on:click="incrementHandler">{{counter}}</button>',
            data:function(){
                return{
                    counter:0
                }
            },
            methods:{
                incrementHandler:function(){
                    this.counter += 1
                    this.$emit('increment')
                }
            },
        })
        new Vue({
            el:'#counter-event-example',
            data:{
                total:0
            },
            methods: {
                incrementTotal:function(){
                    this.total += 1
                }
            }
        })
    </script>



</body>
</html>